<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>管理员角色</span>
			<el-button v-permission="'system:role:create'" type="primary" plain icon="el-icon-circle-plus-outline"
				@click="insert_dialog_visible = true">
				添加角色</el-button>
		</div>
		<el-table :data="roles" style="width: 100%">
			<el-table-column prop="role_id" label="#" width="180"></el-table-column>
			<el-table-column label="角色名称" width="200">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.role_name }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="role_code" label="角色代码" width="220"></el-table-column>
			<el-table-column prop="role_description" label="角色描述" width="250"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-permission="'system:role:edit'" type="primary" plain icon="el-icon-edit"
						@click="openEditDialog(scope.row)" :disabled="scope.row.editable == 0">编辑</el-button>
					<el-button v-permission="'system:role:remove'" type="danger" plain icon="el-icon-delete"
						@click="handleRemove(scope.row.role_id, scope.$index)" :disabled="scope.row.editable == 0">删除
					</el-button>
					<el-link :underline="false" :href="`#/system/role/${scope.row.role_id}`" class="power-link">
						<el-button v-permission="'system:role:auth'" type="warning" plain icon="el-icon-setting"
							:disabled="scope.row.editable === 0">权限</el-button>
					</el-link>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加角色 -->
		<el-dialog title="添加角色" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" :rules="rules" ref="insert_form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="角色名称" prop="role_name">
					<el-input v-model="insert_form.role_name"></el-input>
				</el-form-item>
				<el-form-item label="角色代码" prop="role_code">
					<el-input v-model="insert_form.role_code" placeholder="请输入大写英文字母的角色代码"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="role_description">
					<el-input v-model="insert_form.role_description" placeholder="请输入角色的说明文字"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleInsert">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 编辑角色 -->
		<el-dialog title="编辑角色" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" :rules="rules" ref="edit_form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="角色名称" prop="role_name">
					<el-input v-model="edit_form.role_name"></el-input>
				</el-form-item>
				<el-form-item label="角色代码" prop="role_code">
					<el-input v-model="edit_form.role_code"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="role_description">
					<el-input v-model="edit_form.role_description"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取消</el-button>
				<el-button type="primary" @click="handleEdit">保存</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { Role } from "@/api";
import { mapActions, mapState } from "vuex";

export default {
	name: 'List',
	data() {
		return {
			insert_dialog_visible: false,
			insert_form: {
				role_name: '',
				role_code: '',
				role_description: '',
			},
			edit_dialog_visible: false,
			edit_form: {},
			current_role: '',
			rules: {
				role_name: [{ required: true, message: "请填写角色名称！", trigger: 'blur' }],
				role_code: [
					{ required: true, message: "请填写角色代码！", trigger: 'blur' },
					{ pattern: /^[A-Z_]+$/, message: '只能填写大写字母和下划线！', trigger: 'blur' }
				],
				role_description: [{ required: true, message: "请填写角色描述！", trigger: 'blur' },],
			},
			set_dialog_visible: false,
			active: 0,
			props: {
				label: 'permission_remark',
				children: 'children',
			},
			data: [],
		}
	},
	created() {
		document.title = "角色列表页";
	},
	computed: {
		...mapState('role', ['roles']),
	},
	methods: {
		// 添加角色(vuex)
		...mapActions('role', ['add_role']),
		handleInsert() {
			// 1.表单验证
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					// 后台返回的data数据包含tag_id，由后台返回
					let { status, msg, data } = await this.add_role({ ...this.insert_form });
					if (status) {
						// 关闭弹窗
						this.insert_dialog_visible = false;
						// 添加成功信息提示
						this.$message.success(msg);
					} else {
						// 添加失败信息提示
						this.$message.error(msg);
					}
				}
			});
		},
		// 关闭弹窗，清除表单验证状态
		handleCloseDialog(formName) {
			// formName是变量，不能使用 ref.formName
			this.$refs[formName].resetFields();
		},
		// 打开编辑弹窗
		openEditDialog(role) {
			// 缓存当前操作的tag，为了后续的操作DOM，存的是指针地址
			this.current_role = role;
			// 还原表单数据，浅拷贝一个，让点击保存后才能生效(双向数据绑定在修改的同时内容跟着变，不符合实际需求)
			this.edit_form = { ...role };
			// 打开弹窗
			this.edit_dialog_visible = true;
		},
		// 编辑角色
		...mapActions('role', ['edit_role']),
		async handleEdit() {
			// let { role_id } = this.edit_form;
			// 验证表单(方法2)
			try {
				let valid = await this.$refs.edit_form.validate();
				if (valid) {
					// 发送AJAX
					let { status, msg } = await this.edit_role({ ...this.edit_form });
					if (status) {
						// 操作DOM：让vue知道我们修改了数据，后续vue会自动虚拟DOM、对比等操作，从而实现数据的更新
						// Object.assign(this.current_role, this.edit_form);
						// 关闭弹窗
						this.edit_dialog_visible = false;
						// 添加成功信息提示
						this.$message.success(msg);
					} else {
						// 添加失败信息提示
						this.$message.error(msg);
					}
				}
			} catch (error) {
				console.log(error);
			}
		},
		// 删除角色
		...mapActions('role', ['remove_role']),
		handleRemove(role_id, index) {
			this.$confirm('此操作将永久删除该角色, 是否继续?', '警告', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await this.remove_role({ role_id, index });
					if (status) {
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除！');
				});
		},
	},
}
</script>

<style lang="less" scoped>
.box-card {
	.clearfix {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.power-link {
		margin-left: 10px;
	}
}
</style>
